<script setup>

import StudentAdder from "@/components/form/studentAdder.vue";
import {onBeforeMount, ref} from "vue";
import {getTeacherStudent} from "@/api/api";



const list = ref([])

onBeforeMount(() => {
  getTeacherStudent().then(res => {
    list.value = res.data.data;
  })
})

const setAll = () => {
  location.reload();
}

</script>

<template>
<div>
  <div>
    <div style="text-align: left; display: flex;">
      <student-adder @update="setAll()"></student-adder>
    </div>
    <div v-if="list.length === 0">
      <h1>暂无学生</h1>
    </div>
    <div  class="inner" v-for="(item, index) in list" :key="index">
        <div class="title">
          <h1 style="margin-top: 0; margin-bottom: 0;">Uno: {{item.uno}}</h1>
        </div>
        <div class="detailLess" >
          <a-card :bordered="false" style=" width: 0.5rem; margin: 0; background-color: #48535F"></a-card>
          <div class="card">
            <p>ID: {{item.id}}</p>
            <p>Creat Time: {{item.createTime}}</p>
            <p>Info: {{item.info}}</p>
          </div>
        </div>
    </div>
  </div>
</div>
</template>

<style scoped>
.title{
  text-align: left;
  color: #9AA4B1;
  font-size: 1.5rem;
}
.detailLess {
  width: 100%;
  margin: 0.2rem;
  display: flex;

  .card{
    border-radius: 10px;
    padding: 2%;
    width: 95%;
    text-align: left;
    color: #9AA4B1;
  }
}
</style>